M

MLOG

Čeština

Prozkoumejte Next.js API Routes a odemkněte možnosti full-stack vývoje ve vašich React aplikacích. Naučte se vzory, osvědčené postupy a strategie nasazení.

Next.js API Routes: Vzory pro full-stack vývoj

Next.js přinesl revoluci do vývoje v Reactu tím, že poskytl robustní framework pro tvorbu výkonných a škálovatelných webových aplikací. Jednou z jeho klíčových funkcí jsou API Routes, které umožňují vývojářům vytvářet backendovou funkcionalitu přímo v rámci jejich Next.js projektů. Tento přístup zjednodušuje vývoj, usnadňuje nasazení a odemyká výkonné full-stack schopnosti.

Co jsou Next.js API Routes?

Next.js API Routes jsou serverless funkce napsané přímo ve vašem adresáři /pages/api. Každý soubor v tomto adresáři se stává API endpointem, který automaticky směruje HTTP požadavky na svou odpovídající funkci. To eliminuje potřebu samostatného backendového serveru, zjednodušuje architekturu vaší aplikace a snižuje provozní náklady.

Představte si je jako miniaturní serverless funkce, které žijí uvnitř vaší Next.js aplikace. Reagují na HTTP požadavky jako GET, POST, PUT, DELETE a mohou interagovat s databázemi, externími API a dalšími serverovými zdroji. Klíčové je, že běží pouze na serveru, nikoli v prohlížeči uživatele, což zajišťuje bezpečnost citlivých dat, jako jsou API klíče.

Klíčové výhody API Routes

Začínáme s API Routes

Vytvoření API route v Next.js je jednoduché. Stačí vytvořit nový soubor v adresáři /pages/api. Název souboru určí cestu k route. Například vytvoření souboru s názvem /pages/api/hello.js vytvoří API endpoint dostupný na /api/hello.

Příklad: Jednoduché API pro pozdrav

Zde je základní příklad API route, která vrací JSON odpověď:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Ahoj z Next.js API Route!' });
}

Tento kód definuje asynchronní funkci handler, která přijímá dva argumenty:

Funkce nastaví HTTP stavový kód na 200 (OK) a vrátí JSON odpověď se zprávou.

Zpracování různých HTTP metod

Různé HTTP metody (GET, POST, PUT, DELETE atd.) můžete v rámci vaší API route zpracovávat kontrolou vlastnosti req.method. To vám umožní snadno vytvářet RESTful API.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Získání všech úkolů z databáze
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Vytvoření nového úkolu
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Zpracování nepodporovaných metod
    res.status(405).json({ message: 'Metoda není povolena' });
  }
}

Tento příklad ukazuje, jak zpracovávat GET a POST požadavky pro hypotetický endpoint /api/todos. Zahrnuje také zpracování chyb pro nepodporované metody.

Vzory pro full-stack vývoj s API Routes

Next.js API Routes umožňují různé vzory pro full-stack vývoj. Zde jsou některé běžné případy použití:

1. Získávání a manipulace s daty

API Routes lze použít k načítání dat z databází, externích API nebo jiných datových zdrojů. Mohou být také použity k manipulaci s daty, jako je vytváření, aktualizace nebo mazání záznamů.

Příklad: Získání uživatelských dat z databáze


// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'Uživatel nenalezen' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Interní chyba serveru' });
  }
}

Tento příklad načítá uživatelská data z databáze na základě ID uživatele poskytnutého v URL. Používá knihovnu pro databázové dotazy (předpokládá se, že je v lib/db) k interakci s databází. Všimněte si použití parametrizovaných dotazů k prevenci SQL injection zranitelností.

2. Autentizace a autorizace

API Routes lze použít k implementaci logiky pro autentizaci a autorizaci. Můžete je použít k ověření přihlašovacích údajů uživatele, generování JWT tokenů a ochraně citlivých zdrojů.

Příklad: Autentizace uživatele


// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Neplatné přihlašovací údaje' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Neplatné přihlašovací údaje' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Interní chyba serveru' });
    }
  } else {
    res.status(405).json({ message: 'Metoda není povolena' });
  }
}

Tento příklad autentizuje uživatele porovnáním zadaného hesla s uloženým hashovaným heslem v databázi. Pokud jsou přihlašovací údaje platné, vygeneruje JWT token a vrátí ho klientovi. Klient pak může tento token použít k autentizaci následných požadavků.

3. Zpracování formulářů a odesílání dat

API Routes lze použít ke zpracování odeslaných formulářů a dat zaslaných od klienta. To je užitečné pro vytváření kontaktních formulářů, registračních formulářů a dalších interaktivních prvků.

Příklad: Odeslání kontaktního formuláře


// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'Nové odeslání kontaktního formuláře',
        text: `Jméno: ${name}\nEmail: ${email}\nZpráva: ${message}`,
      });

      res.status(200).json({ message: 'E-mail úspěšně odeslán' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Odeslání e-mailu se nezdařilo' });
    }
  } else {
    res.status(405).json({ message: 'Metoda není povolena' });
  }
}

Tento příklad zpracovává odeslání kontaktního formuláře odesláním e-mailu administrátorovi. Používá knihovnu pro odesílání e-mailů (předpokládá se, že je v lib/email) k odeslání e-mailu. Měli byste nahradit admin@example.com skutečnou e-mailovou adresou příjemce.

4. Webhooky a zpracování událostí

API Routes lze použít ke zpracování webhooků a reakci na události z externích služeb. To vám umožní integrovat vaši Next.js aplikaci s jinými platformami a automatizovat úkoly.

Příklad: Zpracování Stripe webhooku


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Vypnutí výchozího parsování těla požadavku
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Chyba webhooku: ${err.message}`);
      res.status(400).send(`Chyba webhooku: ${err.message}`);
      return;
    }

    // Zpracování události
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent pro ${paymentIntent.amount} byl úspěšný!`);
        // Poté definujte a zavolejte metodu pro zpracování úspěšného platebního záměru.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Poté definujte a zavolejte metodu pro zpracování úspěšného připojení PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Neočekávaný typ události
        console.log(`Nezpracovaný typ události ${event.type}.`);
    }

    // Vraťte odpověď 200 pro potvrzení přijetí události
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Metoda není povolena');
  }
}

Tento příklad zpracovává Stripe webhook ověřením podpisu a zpracováním dat události. Vypíná výchozí body parser a používá vlastní funkci buffer pro čtení surového těla požadavku. Je klíčové vypnout výchozí body parser, protože Stripe vyžaduje surové tělo pro ověření podpisu. Nezapomeňte nakonfigurovat váš Stripe webhook endpoint ve vašem Stripe dashboardu a nastavit proměnnou prostředí STRIPE_WEBHOOK_SECRET.

Osvědčené postupy pro API Routes

Chcete-li zajistit kvalitu a udržovatelnost vašich API Routes, dodržujte tyto osvědčené postupy:

1. Modularizujte svůj kód

Vyhněte se psaní velkých, monolitických API routes. Místo toho rozdělte svůj kód na menší, znovupoužitelné moduly. Tím se váš kód stane srozumitelnějším, testovatelnějším a snadněji udržovatelným.

2. Implementujte zpracování chyb

Správně zpracovávejte chyby ve svých API routes. Používejte bloky try...catch k zachycení výjimek a vracení vhodných chybových odpovědí klientovi. Logujte chyby, abyste si usnadnili ladění a monitorování.

3. Validujte vstupní data

Vždy validujte vstupní data od klienta, abyste předešli bezpečnostním zranitelnostem a zajistili integritu dat. Používejte validační knihovny jako Joi nebo Yup k definování validačních schémat a vynucení datových omezení.

4. Chraňte citlivá data

Ukládejte citlivá data, jako jsou API klíče a přihlašovací údaje k databázi, do proměnných prostředí. Nikdy nezavazujte citlivá data do svého kódového repozitáře.

5. Implementujte omezování počtu požadavků (Rate Limiting)

Chraňte své API routes před zneužitím implementací omezování počtu požadavků. To omezuje počet požadavků, které může klient provést v daném časovém období. Používejte knihovny pro omezování počtu požadavků jako express-rate-limit nebo limiter.

6. Zabezpečte API klíče

Neodhalujte API klíče přímo v kódu na straně klienta. Vždy proxy požadavky přes vaše API routes, abyste ochránili své API klíče před neoprávněným přístupem. Ukládejte API klíče bezpečně do proměnných prostředí na vašem serveru.

7. Používejte proměnné prostředí

Vyhněte se pevnému kódování konfiguračních hodnot ve vašem kódu. Místo toho používejte proměnné prostředí k ukládání konfiguračních nastavení. To usnadňuje správu vaší aplikace v různých prostředích (vývojové, staging, produkční).

8. Logování a monitoring

Implementujte logování a monitoring ke sledování výkonu vašich API routes. Logujte důležité události, jako jsou chyby, varování a úspěšné požadavky. Používejte monitorovací nástroje ke sledování metrik, jako je latence požadavků, chybovost a využití zdrojů. Užitečné mohou být služby jako Sentry, Datadog nebo New Relic.

Aspekty nasazení

Next.js API Routes jsou navrženy pro nasazení na serverless platformách. Mezi populární možnosti nasazení patří:

Při nasazování vaší Next.js aplikace s API Routes se ujistěte, že jsou vaše proměnné prostředí správně nakonfigurovány na platformě pro nasazení. Zvažte také dobu studeného startu serverless funkcí, která může ovlivnit počáteční dobu odezvy vašich API routes. Optimalizace vašeho kódu a používání technik jako provisioned concurrency mohou pomoci zmírnit problémy se studeným startem.

Závěr

Next.js API Routes poskytují výkonný a pohodlný způsob, jak vytvářet full-stack aplikace s Reactem. Využitím serverless funkcí můžete zjednodušit vývoj, snížit provozní náklady a zlepšit výkon aplikace. Dodržováním osvědčených postupů uvedených v tomto článku můžete vytvářet robustní a udržovatelné API Routes, které pohánějí vaše Next.js aplikace.

Ať už vytváříte jednoduchý kontaktní formulář nebo komplexní e-commerce platformu, Next.js API Routes vám mohou pomoci zefektivnit váš vývojový proces a poskytnout výjimečné uživatelské zážitky.

Další zdroje

Next.js API Routes: Vzory pro full-stack vývoj | MLOG